<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- <link href="https://fonts.googleapis.com/css?family=Material+Icons+Round" rel="stylesheet"> -->
        <title>Document</title>
        <style>
            body {
                margin: 0;
                padding: 0px;
            }
            .demo_btn {
                position: fixed;
                top: 0;
                height: 60px;
                z-index: 1;
            }
            .demo_btn a {
                padding: 10px 20px;
                color: #fff;
                background: rgb(82, 196, 26);
            }
            #Anga1 {
                background: #ccc;
                height: 500px;
                margin-bottom: 20px;
            }
            #Anga2 {
                background: #999;
                height: 500px;
                margin-bottom: 20px;
            }
            #Anga3 {
                background: #666;
                height: 500px;
                margin-bottom: 20px;
            }
            .t1 {
                padding: 10px;
                border: 1px solid #999;
                margin-bottom: 20px;
            }
            #t1 {
                /* display: none; */
            }
            .swiper-slide span {
                float: left;
                padding: 10px;
                border: 1px solid #999;
            }
            .jdsSticky1_warp {
                text-align: right;
            }
            .jdsSticky1 {
            }
            .jdsSticky {
                display: inline-block;
                width: 200px;
                height: 200px;
                background: #666;
            }
            .gotop {
                font-size: 36px !important;
                background: pink;
                border-radius: 50%;
            }
            .jdsScrollShow1 {
                position: fixed;
                bottom: 0;
                right: 20px;
                z-index: 1;
            }
            .jdsScrollShow1.active {
                bottom: 10px;
            }
            .jdsScrollShow2 {
                position: fixed;
                bottom: 10px;
                left: 20px;
                z-index: 1;
            }
            .jdsScrollShow3 {
                position: fixed;
                bottom: 10px;
                left: 50%;
                z-index: 1;
            }
            .jdsScrollShow3.lock {
                opacity: 0 !important;
            }
            .jdsDropdown1 {
                position: fixed;
                right: 0;
                top: 50%;
                background: pink;
                z-index: 9;
            }
            .jdsDropdown1 .jdsDownOut {
                position: absolute;
                bottom: 30px;
                right: 0;
            }
            .jdsDropdown2 {
                position: fixed;
                left: 0;
                top: 50%;
                background: green;
                z-index: 9;
            }
            /* 测试 */
            #container {
                position: relative;
            }
        </style>
    </head>
    <body id="goTop" class="jdsSkrollr" debug>
        <h1>JDS <span>2.1</span></h1>

        <h2 class="jdsModal" title="jdsModal title1" data-modal-class="oy1">
            <img
                src="./src/images/travel-logo-pc.png"
                data-src-sp="./src/images/google-logo-sp.png"
                alt="google"
            />
        </h2>
        <div data-modal-body="html">
            123
        </div>

        <div class="jdsDropdown jdsDropdown1">
            jdsDropdown1
            <ul class="jdsDownOut">
                <li>jdsDownOut1</li>
                <li><a href="#Anga2">link</a></li>
            </ul>
        </div>

        <div class="jdsDropdown jdsDropdown2">
            jdsDropdown2
            <div class="jdsDownOut">
                jdsDownOut2
            </div>
        </div>

        <div class="jdsSticky1_warp">
            <span
                class="jdsSticky jdsSticky1 jdsModal"
                data-sticky-class="show"
                data-margin-top="20"
                data-sticky-wrap="true"
                data-modal-class="oy2"
            >
                This is sticky column
            </span>
            <div data-modal-body="html">
                456
                <br />
                456
                <br />
                456
                <br />
                456
                <br />
                456
            </div>
        </div>

        <div
            class="jdsSwiper swiper-container"
            data-config="{
                'loop':true
            }"
        >
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">
                    <span>Slide 2-1</span>
                    <span>Slide 2-2<br />Slide 2-2</span>
                    <span>Slide 2-3<br />Slide 2-3<br />Slide 2-3</span>
                </div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
        </div>

        <div class="t1" id="t1">1</div>
        <div class="t1">
            1<br />1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
            1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
        </div>
        <div class="t1">1<br />1<br />1</div>
        <div class="t1">1<br />1<br />1<br />1</div>

        <div id="nav" class="demo_btn">
            <a href="#Anga1" id="oy1">Anga1</a>
            <a href="#Anga2"
                ><span><b>Anga2</b></span></a
            >
            <a href="#Anga3">Anga3</a>
            <a href="#Anga4">Anga4</a>
            <a href="https://www.baidu.com/">Baidu</a>
        </div>

        <div id="container">
            <span
                class="jdsSticky"
                data-sticky-class="action"
                data-margin-top="0"
                data-sticky-wrap="true"
            >
                This is sticky column
            </span>

            <div
                id="Anga1"
                data-bottom-top="background-color:rgb(10,10,10)"
                data-center-top="background-color:rgb(210,210,210)"
            >
                Anga1
            </div>
            <div id="Anga2">
                Anga2
                <a
                    class="jdsScrollShow jdsScrollShow2"
                    data-trigger="body"
                    data-moreY="0"
                    data-wrap="#Anga2"
                    href="#goTop"
                >
                    <span class="material-icons-round gotop">
                        close
                    </span>
                </a>
            </div>
            <div id="Anga3">
                Anga3
                <a
                    class="jdsScrollShow jdsScrollShow3"
                    data-trigger="body"
                    data-moreY="0"
                    data-wrap="#Anga3"
                    href="#goTop"
                >
                    <span class="material-icons-round gotop">
                        home
                    </span>
                </a>
            </div>

            <a
                class="jdsScrollShow jdsScrollShow1"
                data-trigger="#container"
                data-moreY="0"
                data-wrap="#container"
                href="#goTop"
            >
                <span class="material-icons-round gotop">
                    vertical_align_top
                </span>
            </a>
        </div>

        <div class="jdsSwiper swiper-container" data-config="{'loop':true}">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">
                    <span>Slide 2-1</span>
                    <span>Slide 2-2<br />Slide 2-2</span>
                    <span>Slide 2-3<br />Slide 2-3<br />Slide 2-3</span>
                </div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
        </div>

        <div class="jdsSwiper swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide2 1</div>
                <div class="swiper-slide">Slide2 2</div>
                <div class="swiper-slide">Slide2 3</div>
                <div class="swiper-slide">Slide2 4</div>
                <div class="swiper-slide">Slide2 5</div>
                <div class="swiper-slide">Slide2 6</div>
                <div class="swiper-slide">Slide2 7</div>
                <div class="swiper-slide">Slide2 8</div>
                <div class="swiper-slide">Slide2 9</div>
                <div class="swiper-slide">Slide2 10</div>
            </div>
        </div>

        <script src="./src/jds_2.1.es6.js"></script>
        <script>
            let jds = new JDS({
                // anchorSpeed: 1000,
                // anchorMoreY: JDSTools.getIdHeight('nav'),
                name: 'OY',
                age: 18,
                tilePC: function () {
                    console.log('run in pc');
                    JDSTools.tile('.t1', 2);
                    JDSTools.tile('.swiper-slide span');
                },
                tileSP: function () {
                    console.log('run in sp');
                },
                callback: function () {
                    console.log('callback run');
                    // console.log(JDSTools.getIdHeight('t1'));
                    // console.log(JDSTools.browserWidth());
                    // new JDSSwiper('.swiper-container');
                },
            });

            console.log(jds);

            JDSTools.ajaxJSON(
                'http://web.htmlbox.org/api/get/webs',
                function (items) {
                    let showHtml = document.createElement('ul');
                    showHtml.className = 'ajax_json';
                    items.map(function (item) {
                        showHtml.innerHTML +=
                            '<li>' + item.id + ':' + item.title + '</li>';
                    });
                    document.body.appendChild(showHtml);
                },
                function () {
                    document.querySelector('.ajax_json li').style.color =
                        'pink';
                }
            );

            // 测试
            window.addEventListener('scroll', function () {
                console.log(document.getElementById('Anga1').offsetTop);
            });
        </script>
    </body>
</html>
